﻿{% extends "base.html" %}

{% block css %}
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<link rel="stylesheet" type="text/css" href="{{static_url('m3u8/dplayer/DPlayer.min.css')}}">
	<link rel="stylesheet" type="text/css" href="{{static_url('m3u8/css/share.css')}}">
{% end %}


{% block content %}

    <div class="row2" style="border: 1px solid #393939;width: 85%;margin: 0;padding: 0;float: left;">
        <div class="col-md-12" style="height: 20px;margin-top:2px;margin-bottom: 2px;float: none;">
        	<input type="text" id="id" name="id" value="{{movie["section"]}}" hidden>
        	<input id='copydata' v-model='product_url' style='opacity: 0;position: absolute;width: 20px;' type="text" >
            <h3 class="panel-title" style="float: left;color: aqua;" ondblclick="copyUrl(this);" value="{{movie['url']}}"><span class="glyphicon glyphicon-film" ondblclick="toFuli();" ></span>{{movie["name"]}}</h3>
            <span class="btn btn-success fileinput-button" style="float: right;padding: 0px 2px;height: 18px;font-size: 12px;">
            	<span>Img</span>
            	<input id="logo-file" name="file" multiple="multiple" onchange="handleFile()" type="file" style="cursor: pointer;">
            </span>
            	<!-- <input id="logo" name="logo" type="file" style="float: right;width: 150px;height: 20px;"> -->
        </div>
        <div class="col-md-12" style="float: none;">
            <div id="dplayer-area">
                <div class="video" id="mvideo" ></div>
            </div>
        </div>
        <div class="videolist col-md-12" id="videolist" style="margin: 15px 0px;float: none;">
        	{% for url in movie["urls"] %}
        	<span url="{{url[0]}}" onclick="switchVideo(this);" style="margin: 0px 5px;color: aqua;cursor: pointer;">第{{ url[1] }}集</span>
        	{% end %}
        	<span nextid="{{movie['nextid']}}" onclick="switchNextVideo(this);" style="margin: 0px 5px;color: aqua;cursor: pointer;">下一部</span>
        	<span name="del" currenturl="{{movie["urls"][0][0]}}" onclick="delThisVideo(this);" style="margin: 0px 5px;color: aqua;cursor: pointer;">刪除該段</span>
        </div>
	</div>

{% end %}
{% block set %}
<div style="float: left;padding-left: 10px;">
<div style="margin-bottom: 8px;">
	<span name="showset" type="button" onclick="showset(this);" style="color: antiquewhite;border: antiquewhite;cursor: pointer;">视频切割</span>
</div>
</div>
<div class="row setarea" style="display: none;float: left;width: 190px;margin: 0;padding: 0;">
	<div class="col-md-12" style="margin: 5px;border: 1px solid #393939;color: #707476;">
		<input type="text" id="currentTime" name="currentTime" value="" hidden>
		<form id="setdata" autocomplete="off">
			<input type="text" id="section" name="section" value="{{movie["section"]}}" hidden>
			{% for i in range(1,7) %}
			<div style="width: 150px;float: left;margin-bottom: 0px;">
			    <div style="margin-bottom: 6px;">
			    	<p name="start-time{{i}}" style="float: left;cursor: pointer;margin-right: 5px;">开始{{i}}:</p>
			    	<input type="text" name="start-time{{i}}"  style="width: 60px;height: 20px;font-size:12px;">
			    	<a onclick="jumpPlay(this);"> 预览</a>
				</div>
				<div style="margin-bottom: 0px;">
				    <p name="end-time{{i}}" style="float: left;cursor: pointer;margin-right: 5px;position: relative;left: -45px;">结束{{i}}:</p>
				    <input type="text" name="end-time{{i}}"  style="width: 60px;height: 20px;position: relative;left: -45px;font-size:12px;">
				    <a onclick="jumpPlay(this);" style="position: relative;top: -20px; left: 20px;"> 预览</a>
				</div>
			</div>
			{% end %}

			<div style="width: 100%;">
				<div style="margin-bottom: 8px;float: left;">
					<p name="msg" style="">状态</p>
				</div>
				<div style="margin-bottom: 8px;float: left;position: relative; left: 25px;">
					<span name="setstr" type="button" onclick="setstr();" style="cursor: pointer;color: aqua;">str</span>
				</div>
				<div style="margin-bottom: 8px;float: right;position: relative;right: 30px;">
					<span name="setdata" type="button" onclick="setsubmit();" style="cursor: pointer;color: aqua;">发送</span>
				</div>
			</div>
		</form>
	</div>
</div>
{% end %}
{% block js %}
	{% if movie['type'] == "m3u8" %}
	<script type="text/javascript" src="{{static_url('m3u8/dplayer/hls.min.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{static_url('m3u8/dplayer/DPlayer.min.js')}}"></script>
	<script type="text/javascript" src="{{static_url('m3u8/ckplayer/ckplayer.js')}}" charset="utf-8"></script>
	<script type="text/javascript" src="{{static_url('m3u8/js/jquery-1.11.2.min.js')}}" charset="utf-8"></script>
	<script type="text/javascript" src="{{static_url('m3u8/js/m3u8-parser.min.js')}}"></script>
	<script type="text/javascript" src="{{static_url('m3u8/js/index.js')}}" charset="utf-8"></script>
	<script type="text/javascript">
		var main = "{{movie['url']}}"
		var nextid = "{{movie['nextid']}}"
	    var xml = ""
	    var pic = ""
	    var videoid = "{{movie['section']}}";
	    var urls = "{% for url,index in movie['urls'] %}{{url}} {% end %}";
	    var box = "mvideo";
	    var playertype = "dplayer" ; //如果需要强制ckplayer则改为ckplayer
	    var t = BrowserType();

	    if (t && t.indexOf("IE") >= 0  )
	        playertype = "ckplayer"
	    init();
	</script>
	{% else %}
	<script type="text/javascript" src="{{static_url('m3u8/dplayer/hls.min.js')}}" charset="utf-8"></script>
	<script type="text/javascript" src="{{static_url('m3u8/dplayer/flv.min.js')}}"></script>
    <script type="text/javascript" src="{{static_url('m3u8/dplayer/DPlayer.min.js')}}"></script>
	<script>
		// $('#mvideo').attr("type","video/mp4");
        var dp1 = new DPlayer({
            element: document.getElementById('mvideo'),                        // 可选，player元素
            autoplay: false,                                                  // 可选，自动播放视频，不支持移动浏览器
            preload: 'auto',
            theme: '#2620ff',                                                  // 可选，主题颜色，默认: #b7daff
            loop: false,                                                       // 可选，循环播放音乐，默认：true
            lang: 'zh',                                                        // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator language
            screenshot: true,                                                 // 可选，启用截图功能，默认值：false，注意：如果设置为 true，视频和视频截图必须启用跨域
            hotkey: true,                                                     // 可选，绑定热键，包括左右键和空格，默认值：true
            volume: 0.5,
            video: {
                url: "{{movie['url']}}",
                pic: "",
                type: 'auto'                                         // 可选，视频截图
            },
        });
    </script>
	{% end %}

	<script type="text/javascript">
		/**
		* $icon: 文件上传中loading图标
		* fs: 上传的文件（$("#file")[0].files）
		* max_size: 文件大小的最大值（1024 * 1024 * 100为100M）
		*/
		var t_str = '';
		function handleFile() {
			// let $icon = $(".upload-icon");
			let formData = new FormData();
			let id = $('#id').attr("value");
			let fs = $("#logo-file")[0].files;
			let max_size = 1024 * 1024 * 100;
			for (let i = 0; i < fs.length; i++) {
				let d = fs[0];
				if(d.size <= max_size){  //文件必须小于100M
				  if(/.(png|jpg|jpeg|bmp|gif)$/.test(d.name)){ //文件必须为文档
				  	formData.append("image", fs[i]);  //文件上传处理
				  }else{
				    alert('上传文件必须是图片！');
				    return false
				  }

				}else{
				  alert('上传文件过大！');
				  return false
				}
			}

			// $icon.removeClass("hidden");
			$.ajax({
			type: "POST",
			url: "/uploader/file?id="+id,
			data: formData,
			cache: false,
			processData: false,
			contentType: false
			}).then(res => {
			// $icon.addClass("hidden");
			// console.log(res);
			if (res.code == 200) {
				alert(res.msg);
			  // if (res.data && res.data.length > 0) {
			  //   let _html = '';
			  //   res.data.forEach(d => {
			  //     _html += `
			  //       <li data-url="${d.url}">
			  //         <span>${d.fileName}</span>
			  //         <img class="delete" src="./images/delete.png" alt="">
			  //       </li>
			  //     `;
			  //   });
			  //   $(".upload-content .upload-list").append(_html);
			  // }
			} else {
			  alert(res.msg);
			}
			});
		}
		function copyUrl(obj){
			$('#copydata').val(encodeURI(location.origin+$(obj).attr("value")));
            var copydata = $('#copydata');
            copydata.select();
            document.execCommand("Copy");//执行复制
		}
		function toFuli(){
			var id = $('#id').val();
			$.ajax({
	            type: "GET",
	            url: "/switchMovie?id="+id,
	            data: '',
	            success:function(res){
	                // console.log(res);
	            }
	        })
		}
		function gettime(obj){
			var t = getprogress();
			var H = (Array(2).join("0") + Math.floor(t/3600)).slice(-2);
			var M = (Array(2).join("0") + Math.floor((t%3600)/60)).slice(-2);
			var S = (Array(2).join("0") + parseInt((t%3600)%60)).slice(-2);
			var value = H+":"+M+":"+S;
			$(obj).attr('value',value);

		}
		function setstr(){
			var t1_s = $('input[name$="start-time1"]').attr('value');
			var t1_e = $('input[name$="start-time1"]').attr('value');
			var t2_s = $('input[name$="start-time2"]').attr('value');
			var t2_e = $('input[name$="start-time2"]').attr('value');
			var t3_s = $('input[name$="start-time3"]').attr('value');
			var t3_e = $('input[name$="start-time3"]').attr('value');
			var t4_s = $('input[name$="start-time4"]').attr('value');
			var t4_e = $('input[name$="start-time4"]').attr('value');
			var t5_s = $('input[name$="start-time5"]').attr('value');
			var t5_e = $('input[name$="start-time5"]').attr('value');
			var t6_s = $('input[name$="start-time6"]').attr('value');
			var t6_e = $('input[name$="start-time6"]').attr('value');
		}
		function setsubmit(){
			var data = $('#setdata').serialize();
			$("button[name$='setdata']").attr('disabled',true);
			$("p[name$='msg']").text("处理中");
			$.ajax({
				url:"/cutvideo",
				type:"POST",
				data:data,
				success:function(res){
					console.log(res);
					$("button[name$='setdata']").attr('disabled',false);
					$("p[name$='msg']").text("完成");
					$('input[name$="start-time1"]').attr('value','');
					$('input[name$="end-time1"]').attr('value','');
					$('input[name$="start-time2"]').attr('value','');
					$('input[name$="end-time2"]').attr('value','');
					$('input[name$="start-time3"]').attr('value','');
					$('input[name$="end-time3"]').attr('value','');
					$('input[name$="start-time4"]').attr('value','');
					$('input[name$="end-time4"]').attr('value','');
					$('input[name$="start-time5"]').attr('value','');
					$('input[name$="end-time5"]').attr('value','');
					$('input[name$="start-time6"]').attr('value','');
					$('input[name$="end-time6"]').attr('value','');
				}
			});
		}
		function showset(obj){
			if($('.setarea').is(':hidden')){
				$('.setarea').show();
			}else{
				$('.setarea').hide();
				$('input[name$="start-time1"]').attr('value','');
				$('input[name$="end-time1"]').attr('value','');
				$('input[name$="start-time2"]').attr('value','');
				$('input[name$="end-time2"]').attr('value','');
				$('input[name$="start-time3"]').attr('value','');
				$('input[name$="end-time3"]').attr('value','');
				$('input[name$="start-time4"]').attr('value','');
				$('input[name$="end-time4"]').attr('value','');
				$('input[name$="start-time5"]').attr('value','');
				$('input[name$="end-time5"]').attr('value','');
				$('input[name$="start-time6"]').attr('value','');
				$('input[name$="end-time6"]').attr('value','');
			}
		}
		function switchVideo(obj){
			var url = $(obj).attr('url');
			switchMovie(url);
		}
		function switchNextVideo(obj){
			var id = $(obj).attr('nextid');
			var url = "/play/"+id;
			window.location.href=url;
		}
		function delThisVideo(obj){
			var id = $('#id').attr('value');
			var url = $(obj).attr('currenturl');
			$.ajax({
				url:'/delcutvideo',
				type:'GET',
				data:'id='+id+'&url='+url,
				success:function(res){
					// console.log(res);
				}
			});
			// delVideo(url);
		}
	</script>
	<script>
	    $(document).ready(function() {
		    var u = navigator.userAgent;
			var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
			var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			if (!(isAndroid || isiOS)) {
			  $('#dplayer-area').css('height','600px');
			};
			// 禁用form表单请求
			$("form").submit(function(e){
				e.preventDefault();
			})
			$("p",$("#setdata")).click(function(e){
				var name = $(this).attr("name");
				var t = getprogress();
				var H = (Array(2).join("0") + Math.floor(t/3600)).slice(-2);
				var M = (Array(2).join("0") + Math.floor((t%3600)/60)).slice(-2);
				var S = (Array(2).join("0") + parseInt((t%3600)%60)).slice(-2);
				var value = H+":"+M+":"+S;
				$('input[name$="'+name+'"]').attr('value',value);
			});
			$("a",$("#setdata")).click(function(e){
				var value = $('input',$(this).parent()).val();
				var section = $('#section').val();
				$.ajax({
					url:'/cutvideo',
					type:'GET',
					data:'section='+section+'&cuttime='+value,
					success:function(res){
						value = res.data;
						// console.log(value);
						play_to(value);
					}
				});
				
			})
			$(window).scroll(function() {
	            var scroll = $(document).scrollTop();
	            if(scroll<72){
	                $('.navbar').css({"top":"-"+scroll+"px"});
	            }
	            if(scroll>72){
	                $('.navbar').css({"top":"-72px"});
	            }
	        })
	    });
	</script>
{% end %}